<!DOCTYPE html>
<html>
<head>
	<title>登陆豆瓣</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			margin: 0;
		}
		#top{
			width: 950px;
			height: 60px;
			margin: 0 auto 20px;
			padding-top: 30px;
		}
		#middle{
			width: 950px;
			margin: 0 auto;
		}
		#left{
			width: 590px;
		}
		#bottom{
			width: 950px;
			margin: 0 auto;
		}
		a{
			color: rgb(51,102,153);
			text-decoration: none;
			font-size: 12px;
		}
		.bgcolor:hover{
			color: white;
			background-color: rgb(0,51,153);
		}
		#bottom a:hover{
			color: white;
			background-color: rgb(0,51,153);
		}
		h1{
			font-weight: 500;
			font-size: 26px;
			margin-bottom: 10px;
		}
		#yanzheng{
			width: 290px;
			position: relative;
			left: 170px;
		}
		.shuru{
			width: 200px;
			height: 30px;
			border: 1px solid rgb(205,205,205);
			border-radius: 5px;
			color: rgb(205,205,205);
		}
		.dlk{
			margin-left: 30px;
			padding: 8px;
		}
		span{
			display: inline-block;
			font-size: 12px;
			color: rgb(153,153,153);
		}
		#disanfang{
			margin-left: 100px;
			text-align: center;
			width: 160px;
			padding: 5px;
			border-top: 1px solid rgb(205,205,205);
			border-bottom: 1px solid rgb(205,205,205);
		}
		#zidongdenglu{
			margin-top: 15px;
			margin-left: 100px;
		}
		#denglu{
			margin: 30px 0 20px 100px;
			background-color: rgb(62,160,85);
			color: white;
			cursor: pointer;
			font-size: 14px;
			width: 82px;
			height: 31px;
			border: 1px solid rgb(62,160,85);
			border-radius: 5px;
		}
		#right{
			position: relative;
			top: -250px;
			left: 590px;
			width: 340px;
			font-size: 12px;
		}
		p{
			line-height: 30px;
		}
		#bottom{
			width: 950px;
			border-top: 1px dashed rgb(205,205,205);
		}
		#zuihoua{
			display: inline-block;
			float: right;
		}
		#red1{
			display: none;
			left: 470px;
			top: 197px;
			position: absolute;
			font-size: 12px;
			color: red;
		}
		#red2{
			display: none;
			left: 470px;
			top: 247px;
			position: absolute;
			font-size: 12px;
			color: red;
		}
	</style>
</head>
<body>
	<div id="top"><a href="../douban.html" target="_blank"><img src=""></a></div>
	<div id="middle">
		<div id="left">
			<h1>登陆豆瓣</h1>
			<div class="dlk"><a href="" class="bgcolor" id="yanzheng">手机验证码登陆</a></div>
			<div class="dlk"><label for="yhm">账 号 &nbsp;&nbsp;</label><input id="yhm" class="shuru" type="text" name="" value="邮箱/手机号/用户名" onfocus="if (value == '邮箱/手机号/用户名') {value = ''}" onblur="if (value == '') {value = '邮箱/手机号/用户名'}"></div>
			<div class="dlk"><label for="mima">密 码 &nbsp;&nbsp;</label><input id="mima" class="shuru" type="password" name=""></div>
			<div id="zidongdenglu"><input type="checkbox" name="" id="zidong"><label for="zidong" style="font-size: 12px;color: rgb(95,95,95);">下次自动登陆|</label><a href="" class="bgcolor">忘记密码了</a></div>
			<input id="denglu" type="button" name="" value="登陆">
			<div id="disanfang"><span>第三方登陆</span> &nbsp;&nbsp;<a href=""><img src="https://img3.doubanio.com/f/accounts/1b6cc3ca91f78cf47f41eafa91fbcd4918ae239c/pics/connect_wechat.png"></a> &nbsp;&nbsp;<a href=""><img src="https://img3.doubanio.com/f/accounts/e2f1d8c0ede93408b46cbbab4e613fb29ba94e35/pics/connect_sina_weibo.png"> &nbsp;&nbsp;<a href=""><img src="https://img3.doubanio.com/f/accounts/be10f8fb4a3fd87f2f0d2fa18ed83b7d6b880697/pics/connect_qq.png"></a></a></div>
		</div>
		<div id="right">
			<p>>还没有豆瓣账号？ <a href="zhuce.html" target="_blank" class="bgcolor">立即注册</a><br>
			><a href="zhuce.html" target="_blank" class="bgcolor">点击下载豆瓣移动应用</a></p>
		</div>
	</div>
	<div id="bottom"><span>© 2005－2016 douban.com, all rights reserved</span><div id="zuihoua"><a href="">关于豆瓣</a>·<a href="">在豆瓣工作</a>·<a href="">联系我们</a>·<a href="">免责声明</a>·<a href="">帮助中心</a>·<a href="">开发者</a>·<a href="">移动应用</a>·<a href="">豆瓣广告</a></div></div>
</body>
</html>
<script type="text/javascript">
	var accounts = document.getElementById('yhm');
	var password = document.getElementById('mima');
	var login = document.getElementById('denglu');
</script>